<template>
    <div class="home">

        <div>

            <!--搜索区-->
            <el-input
                    v-model="data.inputArticleName"
                    placeholder="请输入文章标题"
                    :suffix-icon="Search"
                    style="width: 400px;"
                    clearable />

        </div>


        <div style="margin: 10px 0px">

            <el-button type="primary" plain @click="addArticle">新增&nbsp;&nbsp;<el-icon>
                <circle-plus/>
            </el-icon>
            </el-button>

            <!--新增按钮弹框-->
            <el-dialog v-model="data.dialogFormVisible" title="新增文章" width="89%">
                <el-form :model="data.form" label-width="120px">
                    <el-form-item label="文章标题:">
                        <el-input v-model="data.form.name" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="发布人:">
                        <el-input v-model="data.form.user" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="发布时间:">
                        <!--<el-input v-model="data.form.time" style="width: 90%"></el-input>-->


                        <el-date-picker
                                v-model="data.form.time"
                                type="date"
                                prefix-icon="false"
                        />


                    </el-form-item>
                    <el-form-item label="文章内容:" style="width: 90%">
                        <md-editor v-model="data.form.content" :theme="theme"  />
                    </el-form-item>
                </el-form>
                <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAdd">取消</el-button>
        <el-button type="primary" @click="confirmAdd"
        >确认</el-button
        >
      </span>
                </template>
            </el-dialog>


            <!--编辑按钮弹框-->
            <el-dialog v-model="data.editDialogFormVisible" title="编辑文章" width="89%">
                <el-form :model="data.editform" label-width="120px">
                    <el-form-item label="文章标题:">
                        <el-input v-model="data.editform.name" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="发布人:">
                        <el-input v-model="data.editform.user" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="发布时间:">
                        <!--<el-input v-model="data.editform.time" style="width: 90%"></el-input>-->

                        <el-date-picker
                                v-model="data.editform.time"
                                type="date"
                                prefix-icon="false"

                        />


                    </el-form-item>
                    <el-form-item label="文章内容:" style="width: 90%">
                        <md-editor v-model="data.editform.content" :theme="theme"  />
                    </el-form-item>
                </el-form>
                <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="confirmEdit"
        >确认</el-button
        >
      </span>
                </template>
            </el-dialog>




            <!--查看预览-->
            <el-dialog v-model="data.viewDialogFormVisible" title="查看文章信息" width="89%">

                   <el-card>
                       <md-editor :previewOnly="true" v-model="data.content" />
                   </el-card>



            </el-dialog>




        </div>

        <!--表格区-->
        <el-table :data="data.tableData"  stripe>
            <el-table-column sortable prop="id" label="编号"/>
            <el-table-column prop="name" label="文章标题"/>
            <el-table-column prop="content" label="文章内容">

                <template  #default="scope">
                    <el-button @click="view(scope.row.content)">查看内容</el-button>
                </template>

            </el-table-column>
            <el-table-column prop="user" label="发布人"/>
            <el-table-column prop="time" label="发布时间" width="250px"/>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">

                    <el-button type="text" size="small" @click="handleEdit(scope.row)"
                    >编辑
                    </el-button
                    >



                    <el-popconfirm
                            title="你确定删除该文章吗?"
                            @confirm="confirmEvent(scope.row)"
                    >
                        <template #reference>
                            <el-button type="text" size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>



        <div class="pagination-block" style="margin-top: 10px">
            <el-pagination
                    :currentPage="data.currentPage"
                    :page-size="data.pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :small="data.small"
                    :background="data.background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="data.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
    import request from '../utils/request'
    import {Search, Iphone, User, HomeFilled, CirclePlus, Upload, Download ,Bottom} from '@element-plus/icons-vue'
    import {ref, reactive, onMounted,watch} from 'vue'
    import axios from 'axios'
    import { ElMessage } from 'element-plus'

    import { defineComponent } from 'vue';
    import MdEditor from 'md-editor-v3';
    import 'md-editor-v3/lib/style.css';

    import VMdPreview from '@kangc/v-md-editor/lib/preview';
    import '@kangc/v-md-editor/lib/style/preview.css';


    const data = reactive(
        {
            inputArticleName: '',
            tableData: [],
            form: {

            },
            editform: {

            },
            content:{},

            currentPage: 1,
            pageSize: 5,
            total: 10,
            background: false,
            small: false,
            text: '',

            dialogFormVisible: false,
            editDialogFormVisible: false,


            viewDialogFormVisible: false,

            msg : JSON.parse(localStorage.getItem("user"))



        }
    )


    onMounted(() => {
        getData()

    })
    const getData = () => {

        request.get('/article/page',{
            params: {
                pageNum: data.currentPage,
                pageSize: data.pageSize,
                name: data.inputArticleName
            }
        })
            .then((res) => {
                // console.log(res)
                data.tableData = res.records
                data.total = res.total
            })
    }



    const addArticle = () => {
        data.form = {}
        data.dialogFormVisible = true
    }

    const handleEdit = (row) => {
        data.editform = row
        data.editDialogFormVisible = true
    }




    // //markdown
    // const imgAdd = (pos,$file) => {
    //     let $vm = this.$refs.md
    //     //
    //     const formData = new FromData()
    //     formData.append('file',$file)
    //     axios({
    //         url: 'http://localhost:9090/file/upload',
    //         method: 'post',
    //         data: data.form,
    //         headers: {'Content-Type': 'multipart/form-data'},
    //     }).then((res)=>{
    //         $vm.$img2Url(pos,res.data)
    //     })
    // }




    const cancelAdd = () => {
        data.form = {}
        data.dialogFormVisible = false
    }

    const confirmAdd = () => {
        // console.log("form的数据==>",JSON.stringify(data.form))
        request.post('/article/save',data.form)
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: '新增成功',
                        type: 'success',
                    })
                    getData()
                    data.form = {}
                }else {
                    ElMessage({
                        showClose: true,
                        message: '服务器维护中',
                        type: 'error',
                    })
                }
            })
        data.dialogFormVisible = false

    }


    const confirmEdit = () => {

        request.put('/article/updateById',data.editform)
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: '修改成功',
                        type: 'success',
                    })
                    getData()
                    data.editDialogFormVisible = false
                }else {
                    ElMessage({
                        showClose: true,
                        message: '服务器维护中',
                        type: 'error',
                    })
                    getData()
                    data.editDialogFormVisible = false
                }
            })
    }





    // 删除按钮
    const confirmEvent = (row) => {
        // http://localhost:9090/user/delete?id=8
        request.delete('/article/delete?id='+row.id)
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: '删除成功',
                        type: 'success',
                    })
                    getData()
                }else {
                    ElMessage({
                        showClose: true,
                        message: '服务器维护中',
                        type: 'error',
                    })
                }
            })
    }







    const handleSizeChange = (val) => {
        data.pageSize = val
        getData()
    }
    const handleCurrentChange = (val) => {
        data.currentPage = val
        getData()
    }




    const view = (content) => {
        data.viewDialogFormVisible = true
        data.content = content
    }












    watch(
        () => data.inputArticleName,
        (count, prevCount) => {
            if( count != prevCount || count == ''){
                getData()
            }
        }
    );



</script>

<style>
    .home {
        padding: 10px;
    }

    .el-table {
        border-radius: 10px;
        box-shadow: 10px 10px 10px #a7a7a7;
    }

</style>